<template>
	<view class="container">
		<view class="not-btn">
			<view class="head">
				<view class="head-left">
					<text class="head-text">考点</text>
					<image class="head-img" src="/static/exam/spot.png"></image>
					<text class="head-textype">专业知识/法律基础知识及执法诉讼程序</text>
				</view>
			</view>
			<v-question-exam :dataIndex="dataIndex" :subject="subject" :subjectSize="subjectSize" @checkChange="checkChange" @radioChange="radioChange"></v-question-exam>
			<v-analysis v-if="showAnaly" :subject="subject" :class="[subject.showAnalysis == 1 ? 'show' : 'hide']"></v-analysis>
			<view class="head-right">
				<view class="sure-btn" @click="sure">{{ text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import examService from '@/services/exam/exam';
import navbarExam from '@/mixins/common/navbar/exam';
import { mapState, mapGetters, mapMutations } from 'vuex';
import vQuestionExam from './fragment/vquestionexam';
import vAnalysis from './fragment/vanalysis';
const service = new examService(false);
const saveAnswer = new Set();
export default {
	mixins: [navbarExam],
	computed: {
		subject() {
			return Object.keys(this.subjectDetail).length != 0 ? this.subjectDetail[this.dataIndex] : '';
		},
		getChoiceType() {
			//页面展示单选还是多选 1 单选 2 多选
			if (this.subject != '') {
				return this.subject.choiceType == 1 ? '单选题' : '多选题';
			}
		},
		getSubjectChoices() {
			//获取答案选项
			return this.subject != '' ? this.subject.subjectChoices : '';
		}
	},
	data() {
		return {
			examId: '',
			paperId: '', //试卷id，非必传
			showAnaly: false,
			subjectDetail: [],
			paperTypeDesc: '',
			subjectSize: 0, //试卷题目总数
			dataIndex: 0,
			text: '答案解析',
			examBarData: [
				{
					img: '/static/exam/examBar01.png',
					text: '纠错',
					id: 'error',
					type: 'static',
					onPress: context => {
						uni.showToast({
							title: '纠错',
							duration: 2000,
							icon: 'none'
						});
					}
				},
				{
					img: '/static/exam/examBar02.png',
					text: '收藏',
					id: 'collect',
					type: 'static',
					onPress: context => {
						uni.showToast({
							title: '收藏',
							duration: 2000,
							icon: 'none'
						});
					}
				},
				{
					img: '/static/exam/del.png',
					text: '删除',
					type: 'static',
					id: 'del',
					onPress: context => {
						uni.showToast({
							title: '删除',
							duration: 2000,
							icon: 'none'
						});
					}
				}
			]
		};
	},
	components: {
		vQuestionExam,
		vAnalysis
	},
	onLoad(query) {
		this.paperId = query.paperId;
		this.getSubject();
	},
	methods: {
		async getSubject() {
			let _this = this;
			saveAnswer.clear();
			const startAdverte = await service.selfExam(_this.paperId);//自主练习
			this.setData(startAdverte);
			// console.log('subjectDetail:',this.subjectDetail)
		},
		setData(startAdverte) {
			let _this = this;
			if (startAdverte.success) {
				_this.subjectDetail = startAdverte.result.subjectDetail;
				_this.subjectSize = startAdverte.result.subjectSize;
				_this.paperTypeDesc = startAdverte.result.paperTypeDesc;
			} else {
				_this.showModel(startAdverte.message);
			}
		},

		radioChange(chose) {
			let _this = this;
			for (let i = 0; i < _this.getSubjectChoices.length; i++) {
				if (_this.getSubjectChoices[i].choiceId == chose) {
					_this.getSubjectChoices[i].isChose = 1; //0未选中，1选中
					_this.subject.selectChoice = chose; //保存用户答案
				} else {
					_this.getSubjectChoices[i].isChose = 0; //0未选中，1选中
				}
			}
		},
		checkChange(chose) {
			//多选
			let _this = this;
			//判断选中项
			for (let i = 0; i < _this.getSubjectChoices.length; i++) {
				if (_this.getSubjectChoices[i].choiceId == chose) {
					if (_this.getSubjectChoices[i].isChose == 0) {
						//0未选中，1选中
						_this.getSubjectChoices[i].isChose = 1;
					} else {
						_this.getSubjectChoices[i].isChose = 0; //0未选中，1选中   取消选中
					}
				}
			}
			//保存选中项
		saveAnswer.add(chose);           
     _this.subject.selectChoice =  Array.from(saveAnswer)
               
		},

		showModel(mes) {
			if (mes != undefined) {
				uni.showModal({
					title: '提示',
					content: mes,
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		},
		//确定，显示解析
		sure() {
			this.showAnaly = !this.showAnaly;

			if (this.subject != false) {

				if (this.showAnaly == true) {
					this.text = '收起解析';
				} else {
					this.text = '答案解析';
				}
				this.subjectDetail[this.dataIndex].useDuration = this.time;
				this.subject.showAnalysis = 1;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	background: #fff;
}
.head {
	position: relative;
	height: 100upx;
	line-height: 100upx;
	margin: 0 20upx;

	&-left {
		position: absolute;
		display: inline-block;
		width: 75%;
		left: 0;
	}

	&-right {
		width: 100%;
	}

	&-text {
		font-size: 30upx;
		color: #5ea1f8;
		font-weight: bold;
	}

	&-img {
		width: 24upx;
		height: 28upx;
	}

	&-textype {
		font-size: 24upx;
		color: #666;
	}

	&-i {
		display: inline-block;
		margin-right: 50upx;
	}

	&-ico {
		margin-top: 20upx;
		display: inline-block;
		width: 40upx;
		height: 40upx;
		text-align: center;
		background: #999;
		border-radius: 50%;
		color: #fff;
	}

	&-num {
		display: inline-block;
		color: #5ea1f8;
		font-size: 24upx;
	}
}

.line {
	width: 100%;
	height: 1upx;
	border-bottom: 1upx solid #eee;
}
.sure-btn {
	display: block;
	width: 600upx;
	height: 80upx;
	background-color: #5ea1f8;
	border-radius: 8upx;
	line-height: 80upx;
	text-align: center;
	font-size: 28upx;
	color: #ffffff;
	margin: 100upx auto 100upx;
}
.not-btn {
	margin-bottom: 90upx;
}

.btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 80upx;
	&-left {
		display: inline-block;
		width: 50%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 -1upx 10upx #ccc;
	}
	&-right {
		display: inline-block;
		width: 50%;
		height: 80upx;
		background: #5ea1f8;
		box-shadow: 0 -1upx 10upx #ccc;
	}
	&-textl {
		font-size: 28upx;
		color: #333;
	}
	&-text {
		font-size: 28upx;
		color: #fff;
	}
}
.show {
	display: block;
}
.hide {
	display: none;
}
</style>

<style lang="scss">
page {
	height: 100%;
}
</style>
